<!--
圆角边框、盒子阴影、文字阴影
    - 都是CSS3新增的，都不会对其它盒子排列产生影响，不会占用布局空间！

盒子阴影
    box-shadow: 水平 垂直 [模糊 尺寸 颜色 内外];
        - （必须）horizontal位置，允许负值（正：右，负：左）
        - （必须）vertical位置，允许负值（正：上，负：下）
        - （可选）blur，模糊距离，决定清晰度
        - （可选）spread，阴影尺寸大小，决定传播距离长短
        - （可选）color，颜色
        - （可选）inset，内部
    注意：
        1）CSS是没有outset属性的，只有inset属性，倘若加上outset则会出错！
            加上inset表示内部
            去掉inset表示外部
        2）颜色可以用rgba()半透明。
    
文本阴影
    text-shadow: 水平 垂直 [模糊 颜色];
-->
<style>
    div {
        width: 100px;
        height: 50px;
        margin: 50px auto;
        background: cyan;
        /* box-shadow: 5px 5px; */
    }
    div:hover {
        box-shadow: 5px 5px 7px 2px rgba(0, 0, 0, .3);
    }
    span {
        font-size: 14px;
        color: orange;
        text-shadow: 2px 4px 3px rgba(0, 0, 0, .5);
    }
</style>

<div>
    <span>文字阴影</span>
</div>